<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">

<dom-module id="tunnel-edit">
    <template>
        <style include="shared-styles dialogs">
            :host {
            }

            paper-card {
                display: block;
            }

            .submit-btn {
                background-color: var(--mist-blue);
                color: #fff;
            }
            #errormsg {
                padding: 0 24px;
                color: var(--red-color);
            }
        </style>

        <paper-dialog id="editTunnelModal" with-backdrop>
            <h2>Edit Tunnel</h2>
            <paper-icon-button class="close" icon="clear" dialog-dismiss></paper-icon-button>
            <paper-dialog-scrollable>
                <p>
                    <paper-input id="name" label="Name" error-message="Please enter tunnel's name" value="{{newTunnel.name}}"></paper-input>
                    <paper-textarea id="description" label="Description (optional)" rows="1" max-rows="5" error-message="Please enter tunnel's description" value="{{newTunnel.description}}"></paper-textarea>
                    <paper-textarea id="cidrs" label="CIDRs" rows="3" max-rows="5" error-message="Please enter tunnel's description" value="{{newTunnel.cidrs}}"></paper-textarea>
                    <div id="errormsg" hidden$="[[!fail]]"></div>
                </p>
                <div class="clearfix btn-group">
                    <paper-button class="submit-btn btn-block" disabled$="[[!formReady]]" raised on-tap="_submitForm">Submit</paper-button>
                </div>
            </paper-dialog-scrollable>
        </paper-dialog>

        <iron-ajax id="tunnelEditAjaxRequest" url="/api/v1/tunnels/[[tunnel.id]]" method="PUT" handle-as="json" on-response="_handleTunnelEditAjaxResponse" on-error="_handleTunnelEditAjaxError"></iron-ajax>
    </template>

    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'tunnel-edit',

                properties: {
                    tunnel: {
                        type: Object
                    },
                    newTunnel: {
                        type: Object,
                        computed: '_computeNewTunnel(tunnel)',
                        notify: true
                    },
                    sendingData: {
                        type: Boolean,
                        value: false
                    },
                    formReady: {
                        type: Boolean,
                        computed: '_computeFormReady(newTunnel.name, newTunnel.cidrs, sendingData)'
                    },
                    fail: {
                        type: Boolean,
                        value: false
                    }
                },
                listeners: {
                    'iron-overlay-closed': '_modalClosed',
                    'change': '_editing'
                },
                _computeNewTunnel: function(tunnel) {
                    if (tunnel) {
                        var cidrs = this.tunnel.cidrs.join('\n');
                        return {
                            name: tunnel.name,
                            description: tunnel.description,
                            cidrs: cidrs
                        };
                    }
                },
                _computeFormReady: function(name, cidrs, sendingData) {
                    var formReady = false;

                    if (name && cidrs) {
                        formReady = true;
                    }

                    if (sendingData) {
                        formReady = false;
                    }

                    return formReady;
                },
                _openEditTunnelModal: function(e) {
                    this.$.editTunnelModal.open();
                    this._formReset();
                },
                _closeEditTunnelModal: function(e) {
                    this.$.editTunnelModal.close();
                    this._formReset();
                },
                _modalClosed: function() {
                    this._formReset();
                },
                _submitForm: function(e) {
                    // var val = this.$.cidrs
                    // if (typeof(this.$.cidrs.value) == 'array'){
                    //     var cidrs = this.$.cidrs.value;
                    // }
                    // else {
                    //     var cidrs = this.$.cidrs.value.split('\n');
                    // }
                    this.$.tunnelEditAjaxRequest.headers["Content-Type"] = 'application/json';
                    this.$.tunnelEditAjaxRequest.headers["Csrf-Token"] = CSRF_TOKEN;
                    this.$.tunnelEditAjaxRequest.body = {
                        name: this.newTunnel.name,
                        description: this.newTunnel.description,
                        cidrs: this.newTunnel.cidrs
                    };
                    
                    // console.log('CIDRS',cidrs);

                    this.$.tunnelEditAjaxRequest.generateRequest();

                    this.set('sendingData', true);
                },
                _editing: function(){
                    this.set("fail", false);
                    this.set('sendingData', false);
                },
                _formReset: function() {
                    this.set('tunnel', {
                        name: this.tunnel.name,
                        id: this.tunnel.id,
                        description: this.tunnel.description,
                        cidrs: this.tunnel.cidrs
                    })
                    this.set('sendingData', false);
                    this.set("fail", false);
                },
                _handleTunnelEditAjaxResponse: function(e) {
                    this.set('sendingData', false);
                    this._closeEditTunnelModal();
                },
                _handleTunnelEditAjaxError: function(e){
                    var msg404;
                    if (e.detail.error.message.indexOf('404')> -1){
                        msg404 = 'Tunnel seems deleted';
                    }
                    this.$.errormsg.textContent = e.detail.error.message+' '+msg404;
                    this.set('sendingData', true);
                    this.set("fail", true);
                }
            });
        })();
    </script>
</dom-module>
